<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery ScrollView, ScrollView Widget, ScrollView, Mobile ScrollView" />
    <meta name="description" content="jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView." />
    <title id="Description">jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(function () {
            var theme = getDemoTheme();
            $('#photoGallery').jqxScrollView({ width: 600, height: 650, buttonsOffset: [0, -150], theme: theme ,slideShow: false, showButtons: false });
            $('#StartBtn').jqxButton({ theme: theme });
            $('#StopBtn').jqxButton({ theme: theme });
            $('#StartBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: true });
            });
            $('#StopBtn').click(function () {
                $('#photoGallery').jqxScrollView({ slideShow: false });
            });
        });
    </script>
    <style type="text/css">
        .photo
        {
            width: 600px;
            height: 650px;
            background-color: #f00;
            background-position: top;
            background-repeat: no-repeat;
            vertical-align:bottom;
            align:center;
            color:#fff;
        }
    </style>
</head>
<body class="default">
    <div id="photoGallery">
        <div><div class="photo" style="background-image: url(../../images/imageNature1.jpg)">
        <span style="position:relative; top:550px; vertical-align:bottom;">
		Frederick, Maryland (CNN) -- In front of a mirror<a href="http://www.amyam.com" > Clieck Here</a>and, Aesha Mohammadzai sees what is possible.
There, in the center of her face, is a nearly complete piece of herself -- a piece she's been missing since the day she was mutilated nearly four years ago.
Since August 2010, when her image appeared on the cover of Time magazine, she's been known for what she didn't have. Her Taliban husband and in-laws hacked off her nose and ears as punishment for running away.
Her disfigured face became a symbol for oppressed women in Afghanistan, a reminder of what might come in spades if the Taliban regains control.
Today, she is only minor surgeries away from having the new nose she's longed for. The grueling procedures -- involving a painful skin expander in her forehead, as well as skin, bone and cartilage grafts -- are behind her. Come this summer, for the first time in years, she will appear whole.
But rebuilding a nose and rebuilding a life are two very different propositions. The first involves her being at the mercy of others; the second demands that Aesha, 22, do the work.
With the end of her face's transformation in sight, she <a href="http://www.amyam.com" > Clieck Here</a>and the Afghan family that's embraced her believe everything else -- an 
		</span></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/imageNature5.jpg)"></div></div>
    </div>
    <div style='margin-top: 20px;'>
        <br />
        <div>
            <input type="button" value="Start Slideshow" id="StartBtn" />
            <input type="button" value="Stop Slideshow" id="StopBtn" />
        </div>
    </div>
</body>
</html>
